<template>
    <div class="lazy-container">
        <!-- 图片懒加载 -->
        <img v-for="item in 2" border="0" :key="item"  v-lazy:background-image="'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F1110200ZS0%2F2011100ZS0-12-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647330496&t=b89bc7704438b06a00cef5a982473324'">
        <!-- 背景图片懒加载,需有宽高 -->
        <div v-for="item in 2" :key="item" border="0"  v-lazy:background-image="'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F1110200ZS0%2F2011100ZS0-12-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647330496&t=b89bc7704438b06a00cef5a982473324'"></div>
    </div>
</template>

<style lang="less" scoped>
    .lazy-container {
        img, div {
            width: 100%;
            height: auto;
            display: block;
            margin-bottom: 12px;
            background-size: cover;
            background-repeat: no-repeat;
            height: 400px;
            outline: none;
        }
    }
</style>

